import React, { memo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addCountAsync, deleteAsync } from '../actions/list';

export default memo(function Item({ id }: { id: string }) {
    console.log('re-render Item');

    const dispatch = useDispatch();
    const count = useSelector((state: any) => state.list.users.entities[id].count);
    const name = useSelector((state: any) => state.list.users.entities[id].name);

    return (
        <main className='container p-4 border'>
            <div>{name}</div>
            <div className='p-4'>user count is: {count}</div>
            <button
                className='p-2 border'
                type='button'
                onClick={() => {
                    dispatch(addCountAsync(id));
                }}
            >
                AddCount
            </button>
            <button
                className='p-2 border'
                type='button'
                onClick={() => {
                    dispatch(deleteAsync(id));
                }}
            >
                delete item
            </button>
        </main>
    );
});
